<template>
    <div class="photograph">
        <!-- 退出 -->
        <img class="exitBtn" @click="clickExitBtn" v-if="type != 4" src="../assets/img/exitBtnTwo.png" alt="">
        <!-- 标题 -->
        <!-- <heads v-if="type == 1" title="AI照片示例" class="headss"></heads>
        <heads v-if="type == 2 || type == 3" title="AI照片拍摄" class="headss"></heads>
        <heads v-if="type == 4" title="AI照片生成" class="headss"></heads>
        <heads v-if="type == 5" title="AI照片预览" class="headss"></heads>
        <heads v-if="type == 6" title="AI照片打印" class="headss"></heads> -->
        <heads v-if="type == 1" :types="2" class="headss"></heads>
        <heads v-if="type == 2" :types="3" class="headss"></heads>
        <heads v-if="type == 4 || type == 3" :types="4" class="headss"></heads>
        <heads v-if="type == 5" :types="5" class="headss"></heads>
        <heads v-if="type == 6" :types="5" class="headss"></heads>
        <!-- 内容 -->
        <div class="conlist">
            <!-- 注意事项 -->
            <div class="zhuyiBox" v-show="type == 1">
                <div class="zhuyiImg">
                    <img src="../assets/img/zhuyi.png" alt="">
                </div>
                <div class="btnBox FONT" @click="clickStart">开始拍照</div>
            </div>
            <!-- 拍照中 -->
            <div class="takingPhotos" v-show="type == 2">
                <div class="photosBox">
                    <video ref="videos" src="" :controls="false"></video>
                    <img class="renxiang" src="../assets/img/renxiang.png" alt="">
                    <div class="djs" v-show="isShowDjs">{{numTime}}</div>
                </div>
                <div class="photosTip FONT">请看向上方镜头</div>
            </div>
            <!-- 拍照完成 -->
            <div class="photosFinish" v-show="type == 3">
                <div class="photosBoxTwo">
                    <div class="divs">
                        <img class="finish" :src="faceUrl" alt="">
                    </div>
                </div>
                <div class="photosBtns">
                    <div class="btnBox FONT leftBtn" @click="retakePhoto">
                        <i class="icons el-icon-close"></i>
                        <div>重拍</div>
                    </div>
                    <div class="btnBox FONT leftBtn rightBtn" @click="photosSubmit">
                        <i class="icons el-icon-check"></i>
                        <div>确定</div>
                    </div>
                </div>
            </div>
            <!-- 生成中 -->
            <div class="generatingProgress" v-show="type == 4">
                <div class="photosBoxTwo">
                    <div class="divs">
                        <img class="finish" :src="faceUrl" alt="">
                        <myLoading></myLoading>
                    </div>
                </div>
                <div class="loading">
                    <!-- <div class="lineBox">
                        <div class="progress" :style="{'width':percentage+'%'}"></div>
                        <img class="imgs" :style="{'left':percentage+'%'}" src="../assets/img/loadingGif.gif" alt="">
                        <div class="numbers">{{percentage}}%</div>
                    </div> -->
                    <div class="lineBox">
                        <div class="progress">
                            <div class="progressCon"></div>
                        </div>
                        <img class="imgs" src="../assets/img/loadingGif.gif" alt="">
                    </div>
                </div>
                <div class="tips FONT">{{loadingTextArr[loadingIndex]}}</div>
            </div>
            <!-- 生成成功 -->
            <div class="generatingSuccess" v-show="type == 5">
                <div class="photosBoxTwo">
                    <div class="divs">
                        <img class="finish" :src="generatePhoto" alt="">
                    </div>
                    <div class="afterBox">
                        <div class="span FONT">After</div>
                        <img src="../assets/img/afterImg.png" alt="">
                    </div>
                </div>
                <div class="successButtom">
                    <div class="leftBox">
                        <div class="divs">
                            <img class="finish" :src="photograph" alt="">
                        </div>
                        <div class="beforeBox">
                            <img src="../assets/img/beforeImg.png" alt="">
                            <div class="span FONT">Before</div>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="btnBox FONT" @click="clickNext">
                            <div>下一步</div>
                            <img src="../assets/img/shou.png" alt="">
                        </div>
                        <div class="nextTip FONT">点击扫码获取AI照片~</div>
                    </div>
                </div>
                <!-- <div class="photosBtns">
                    <div class="bths" @click="clickNext">下一步</div>
                </div> -->
            </div>
            <!-- 公众号下载 -->
            <div class="generatingSuccess" v-show="type == 6">
                <div class="photosBoxThree" ref="photos" @click="clickHc">
                    <div class="divs">
                        <img class="finish" :src="generatePhoto" alt="">
                    </div>
                    <div class="textTip">
                        <span class="FONT">#少女蟲和日落的寓意都是未完待续</span>
                        <img src="../assets/img/xingXing.png" alt="">
                    </div>
                </div>
                <div class="gzhDownload tuoFun">
                    <div class="tips FONT">
                        <div>关注微信公众号，<br/>点击菜单栏【我要取片】，<br/>获取您的AI照片。</div>
                        <img src="../assets/img/afterImg.png" alt="">
                    </div>
                    <div class="qrCodeBox">
                        <div class="codeBox">
                            <div class="code">
                                <img :src="deviceQrcode" alt="">
                            </div>
                        </div>
                        <div class="titles FONT">扫描屏幕二维码</div>
                    </div>
                </div>
            </div>
            <!-- <div class="generatingSuccess" v-show="type == 6">
                <div class="photosBox">
                    <img class="finish" id="printArea" :src="generatePhoto" alt="">
                </div>
                <div class="tuoFun">
                    <div class="qrCodeBox">
                        <div class="codeBox">
                            <div class="code">
                                <img :src="deviceQrcode" alt="">
                            </div>
                        </div>
                        <div class="titles">扫描屏幕二维码</div>
                        <div class="tips">关注微信公众号,<br/>点击菜单栏【我要取片】，获取您的AI照片。</div>
                    </div>
                    <div class="printBox">
                        <template v-if="printStep == 1">
                            <div class="type1">
                                <img class="print" src="../assets/img/printer.png" alt="">
                                <div class="printBtns" @click="clickPrint">打印AI照片</div>
                            </div>
                        </template>
                        <template v-else-if="printStep == 2">
                            <div class="type2">
                                <div class="loading">
                                    <i class="el-icon-loading"></i>
                                </div>
                                <div class="titles">
                                    <img src="../assets/img/printer.png" alt="">
                                    <span>打印中，请稍等...</span>
                                </div>
                                <div class="tips">请不要走开哦~</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="type3">
                                <div class="titles">
                                    <img src="../assets/img/printer.png" alt="">
                                    <span>打印已完成，请返回主页</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div> -->
        </div>
        <!-- 拍照用 -->
        <canvas id="canvas" v-show="false" :width="742*2" :height="1035*2"></canvas>
        <!-- 相框图片合成用 -->
        <canvas id="canvasHc" v-show="false" :width="814" :height="988"></canvas>

        <!-- 公众号弹框 -->
        <officialAccount :isShow.sync="officialAccountShow" @scanCodeEnd="scanCodeEnd"></officialAccount>
        <!-- 打印弹框 -->
        <printer :isShow.sync="printShow" @printEnd="printEnd"></printer>
        <!-- 退出确认弹框 -->
        <exitConfirmation :isShow.sync="exitShow" @confirm="confirm"></exitConfirmation>
        <!-- 生成中断弹框 -->
        <exitConfirmation :isShow.sync="interruptShow" :tipShow="false" :closeShow="false" :text="interruptText" @confirm="interruptConfirm"></exitConfirmation>
        <!-- 未支付弹框 -->
        <exitConfirmation :isShow.sync="isPaymentStatusShow" :tipShow="false" :closeShow="false" :text="interruptText" @confirm="isPaymentStatusConfirm"></exitConfirmation>
    </div>
</template>

<script>
import heads from '../components/heads.vue'
import officialAccount from '../components/officialAccount.vue'
import printer from '../components/printer.vue'
import exitConfirmation from '../components/exitConfirmation.vue'
import myLoading from '../components/myLoading.vue'
import {mapState,mapMutations} from 'vuex'
// import {initWebSocket,websocketonopen,sendMsg,websocketonmessage,websocketclose} from '../utils/websocket'
import SockJS from  'sockjs-client';
import Stomp from 'stompjs';
// import QWebChannel  from '@/utils/qwebchannel'
import {getDeviceQrcode} from '../server/api'
import domtoimage from 'dom-to-image';
import rasterizeHTML from 'rasterizehtml'
export default {
    components:{
        heads,
        officialAccount,
        printer,
        exitConfirmation,
        myLoading
    },
    computed:{
        ...mapState([
            //必须带引号
            'token',
            'generatePhoto',
            'photograph',
            'orderNumber',
            'paymentStatus'
        ])
    },
    data(){
        return{
            // 当前步骤 (1注意事项 2拍照中 3拍照成功 4生成中 5生成成功 6AI照片打印中)
            type:1,
            // 倒计时数
            numTime:5,
            // 是否开始倒计时
            isShowDjs:false,
            // 倒计时
            time:null,
            // 拍照完成的图片地址
            faceUrl:'',
            // 公众号弹框
            officialAccountShow:false,
            // 打印弹框
            printShow:false,
            // 退出弹框
            exitShow:false,
            // 打印配置参数
            print: {
                id: 'printArea',
                popTitle: '打印', // 打印配置页上方标题
                extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
                preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
                previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
                previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
                zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
                previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
                previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
                beforeOpenCallback() {}, // 开启打印前的回调事件
                openCallback() {
                    console.log(this)
                }, // 调用打印之后的回调事件
                closeCallback() {},
                clickMounted(){
                    // console.log(this)
                }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
                url: '',
                standard: '',
                extraCss: '',
            },


            stompClient:'',
            timer:'',
            // 打印步骤 1待打印 2打印中 3打印完成
            printStep:1,
            // 生成进度条
            percentage:0,
            // 公众号二维码
            deviceQrcode:'',

            // 产品id
            taskId:0,

            // 加载中的提示语
            loadingTextArr:[
                '别紧张，AI只是在给你的照片加点魔法尘埃，马上就好',
                '别急，AI正在给你的照片注入灵魂......',
                'AI可能比你还紧张，毕竟这可是它的代表作',
                '耐心点，AI正在给你的照片注入星辰之力，精彩马上到来',
                '嘿，AI正在努力让你的照片颜值爆表呢，稍安勿躁',
                '耐心等等，AI正在给你的照片装一把幽默发条，马上乐起来',
            ],
            loadingIndex:0,

            // 生成中断提示
            interruptShow:false,
            // 生成中断提示内容
            interruptText:'',


            // 未支付弹框
            isPaymentStatusShow:false,

            // 是h5上传
            isH5Upload:false,
        }
    },
    methods:{
        ...mapMutations([
            'setCommonData',
            'setGeneratePhoto'
        ]),
        // 点击开始拍照
        clickStart(){
            this.type = 2;
            this.startCamera();
        },
        // 调用摄像头
        startCamera() {
            this.thisVideo = this.$refs.videos;
            console.log(navigator.mediaDevices)
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ 
                    video: {
                        // width: { min: 246, ideal: 492, max: 738 },
                        height: { min: 720, ideal: 2160, max: 2160 },
                        aspectRatio: 742/1035 //宽高比
                    }
                })
                .then(stream => {
                    console.log('摄像头调用成功');
                    this.thisVideo.srcObject = stream;
                    // console.log(stream)
                    let that = this;
                    this.thisVideo.onloadedmetadata = function(e) {
                        // 输出视频的高度
                        console.log("Video height: " + this.videoHeight);
                        that.thisVideo.play() //  播放视频
                        setTimeout(()=>{
                            that.isShowDjs = true;
                            // 开始倒计数
                            that.startCountdown();
                        },0)
                    };
                })
                .catch(error => {
                    console.error('摄像头调用错误:', error);
                });
            } else {
                alert('不支持摄像头调用');
            }
        },
        // 倒计时
        startCountdown(){
            this.time = setInterval(() => {
                if(this.numTime == 1){
                    clearInterval(this.time);
                    // 执行拍照操作
                    // 拍照结束展示结果
                    this.type = 3
                    this.isShowDjs = false;
                    this.onPhotoFun();
                    // 关闭摄像头调用
                    this.stopCamera();
                }
                this.numTime = this.numTime - 1;
            }, 1000);
        },
        // 拍照方法
        onPhotoFun() {
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');
            const video = this.$refs.videos;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            this.faceUrl = canvas.toDataURL('image/png');
            console.log(this.faceUrl)
        },
        //清空画布
        clearCanvas() {
            let c = document.getElementById('canvas');
            let cxt = c.getContext("2d");
            cxt.clearRect(0, 0, 750, 938);
        },
        //重置画布
        resetBtn() {
            this.faceUrl = "";
            this.clearCanvas();
        },
        //关闭摄像头
        stopCamera() {
            if (this.thisVideo && this.thisVideo !== null) {
                this.thisVideo.srcObject.getTracks()[0].stop();
                // this.os = true;//切换成打开摄像头
            }
        },
        // 点击重拍
        retakePhoto(){
            // 返回步骤一
            this.type = 1;
            // 清空倒计时
            this.numTime = 5;
            // 清空画布
            this.resetBtn();
        },
        // 点击确定
        photosSubmit(){
            // this.stopCamera();
            this.type = 4;
            this.setCommonData({
                key:'photograph',
                value:this.faceUrl
            })
            // 生成图片
            console.log('调用后台生成图片')
            this.changeLoadingText();
            this.initWebSocket()
            // setTimeout(()=>{
            //     this.type = 5;
                
            // },3000)
            // setInterval(()=>{
            //     this.percentage = this.percentage + 10;
            // },1000)
        },
        // 加载中词切换
        changeLoadingText(){
            setInterval(()=>{
                // 判断是否是最后一个
                if((this.loadingTextArr.length - 1) == this.loadingIndex){
                    this.loadingIndex = 0;
                }else{
                    this.loadingIndex = this.loadingIndex + 1;
                }
            },5000)
        },

        // 点击下载
        clickDownload(){
            // this.officialAccountShow = true;
            // 跳转下载页面
            this.$router.push('/download');
        },
        // 公众号弹框扫码完毕
        scanCodeEnd(){
            this.setCommonData({
                key:'isDownload',
                value:true,
            })
            this.setCommonData({
                key:'lastOperation',
                value:'isDownload',
            })
            // 跳转完成列表页面
            this.$router.push('/otherList')
        },
        // 点击打印
        clickPrint(){
            // 弹框显示
            // this.printShow = true;
            // this.type = 6;
            this.printStep = 2;
            // 与qt交互
            // new QWebChannel(qt.webChannelTransport, (channel)=> {
            //     // channel.objects.webView.paraconfigChanged()
            //     var myObject = channel.objects.myObject;
            //     // 接收数据
            //     myObject.sendMessageToJS.connect((response) => {
            //         let dataQt = {};
            //         if (response) {
            //             dataQt = JSON.parse(response);  
            //             console.log(dataQt)
            //         }   
            //     })
            //     // 发送数据
            //     let msgType = "loadDataReq";
            //     let obj = { msgType };
            //     myObject.sendMessageToQt(JSON.stringify(obj));
            // })
            // setTimeout(()=>{
            //     this.printStep = 3;
            // },2000)
        },
        // 确认打印
        // submitPrint(){
        //     this.setCommonData({
        //         key:'isPrinter',
        //         value:true,
        //     })
        //     // 跳转打印页面
        //     this.$router.push('/printPage');
        // },
        // 打印结束
        printEnd(){
            this.setCommonData({
                key:'isPrinter',
                value:true,
            })
            this.setCommonData({
                key:'lastOperation',
                value:'isPrinter',
            })
            // 跳转完成列表页面
            this.$router.push('/otherList')
        },
        // 点击下一步
        clickNext(){
            this.type = 6;
            
        },
        // 点击退出
        clickExitBtn(){
            this.exitShow = true;
        },
        // 点击退出确认
        confirm(){
            // 跳转首页
            this.$router.push('/theme')
        },
        initWebSocket() {
            this.connection();
            let that= this;
            // 断开重连机制,尝试发送消息,捕获异常发生时重连
            this.timer = setInterval(() => {
                try {
                    that.stompClient.send("test");
                } catch (err) {
                    console.log("断线了: " + err);
                    that.connection();
                }
            }, 5000);
        },  
        connection() {
            let url = process.env.VUE_APP_BASE_API+'/ws';
            let clientId = localStorage.getItem('clientId');
            // 建立连接对象
            let socket = new SockJS(url + '?Authorization=Bearer ' + this.token + '&clientId=' + clientId);
            // let socket = new SockJS(url);
            // 获取STOMP子协议的客户端对象
            this.stompClient = Stomp.over(socket);
            // 定义客户端的认证信息,按需求配置
            let headers = {
                Authorization:'Bearer '+this.token,
                clientId
            }
            // 向服务器发起websocket连接
            this.stompClient.connect(headers,(frame) => {
                this.stompClient.subscribe('/user/'+this.taskId+'/queue/draw', (msg) => { // 订阅服务端提供的某个topic
                    console.log('广播成功')
                    console.log(msg);  // msg.body存放的是服务端发送给我们的信息
                    let data = JSON.parse(msg.body)
                    console.log(data)
                    // 进度条
                    if(data.messageType == 'IN_PROGRESS'){
                        this.percentage = data.percent;
                    }
                    // 生成成功
                    if(data.messageType == 'EXECUTED'){
                        // let images = data.imageUrl;
                        let outputImageUrl = data.outputImageUrl;
                        // 图片生成成功
                        this.setGeneratePhoto(outputImageUrl);
                        let inputImageUrl = data.inputImageUrl;
                        // 设置生成前图片
                        this.setCommonData({
                            key:'photograph',
                            value:inputImageUrl
                        })
                        this.type = 5;
                        this.percentage = 0;
                        // 关闭链接
                        this.disconnect()
                    }
                    // 生成报错
                    if(data.messageType == 'ERROR'){
                        // 图片生成报错
                        this.interruptText = data.message;
                        this.interruptShow = true;
                    }
                    // 重复生成
                    if(data.messageType == 'INTERRUPT'){
                        // 重复生成
                        this.type = 4;
                    }
                    // 未支付
                    if(data.messageType == 'INSUFFICIENT_CONDITIONS'){
                        // 
                        this.interruptText = '您未支付，请重新选择支付'
                        this.isPaymentStatusShow = true;
                    }
                },headers);

                // 发送消息
                let obj = {};
                if(this.isH5Upload){
                    // obj.imageUrl = this.faceUrl
                }else{
                    obj.imageBase64 = this.faceUrl
                }
                this.stompClient.send("/vision/comfy/generate/image/"+this.taskId,{},JSON.stringify(obj))   
                // this.stompClient.send("/vision/comfy/generate/image/"+this.taskId,{},JSON.stringify({
                //     imageName:'',
                //     imageBase64:this.faceUrl
                // }))   //用户加入接口
            }, (err) => {
                // 连接发生错误时的处理函数
                console.log('失败')
                console.log(err);
            });
        },    //连接 后台
        disconnect() {
            if (this.stompClient) {
                this.stompClient.disconnect();
            }
        },  // 断开连接
        // 生成中断提示点击确认
        interruptConfirm(){
            this.retakePhoto();
        },
        // 未支付弹框
        isPaymentStatusConfirm(){
            this.$router.push('/theme')
        },

        // 获取公众号二维码
        getDeviceQrcodes(){
            getDeviceQrcode(this.orderNumber,'orderNo').then(res=>{
                console.log(res);
                this.deviceQrcode = res.data;
            }).catch(err=>{
                console.log(err);
            })
        },

        // 点击合成
        clickHc(){
            rasterizeHTML.drawDocument(this.$refs.photos, {}).then(function(res){
                    // document.body.innerHTML = '页面截图已生成：<br/>' + res.image.outerHTML
                    console.log(res)
            });
            // domtoimage.toPng(this.$refs.photos,{scale: 4})
            // .then((dataUrl)=> {
            //     console.log(dataUrl)
            //     var link = document.createElement("a");
            //     link.download = path_img;
            //     link.href = dataUrl;
            //     link.click();
            //     // this.downloadImage(dataUrl)
            // })
            // .catch(function (error) {
            //     console.error('oops, something went wrong!', error);
            // });
        },
        // downloadImage(base64Data){
        //     const base64String = base64Data.split(',')[1]; // 去掉 data:image/jpeg;base64, 前缀
        //     const byteCharacters = atob(base64String);
        //     const byteNumbers = new Array(byteCharacters.length);
        //     for (let i = 0; i < byteCharacters.length; i++) {
        //         byteNumbers[i] = byteCharacters.charCodeAt(i);
        //     }
        //     const byteArray = new Uint8Array(byteNumbers);
        //     const blob = new Blob([byteArray], { type: 'image/png' });

        //     // 创建一个临时的 a 标签来触发下载
        //     const link = document.createElement('a');
        //     link.href = URL.createObjectURL(blob);
        //     link.download = 'xxxx.jpg'; // 设置下载的文件名
        //     document.body.appendChild(link);
        //     link.click();
        //     document.body.removeChild(link); // 清理
        // },


        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime,
            });
        },
        // base64分片
        base64Fragmentation(base64String){
            let id = this.generateRandomString(8)
            let splitLength = 30000; // 指定分割的长度
            let splits = [];

            for (let i = 0; i < base64String.length; i += splitLength) {
                splits.push({
                    id:id,
                    str:base64String.substr(i, splitLength)
                });
            }
            console.log(splits)
            return splits
        },
        // 生成随机字符串
        generateRandomString(length) {
            let result = '';
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        },
        convertBase64ToImage(base64String) {
            // 检查输入的 Base64 字符串是否有效
            if (base64String) {
                // 将 Base64 转换为 Blob
                const byteCharacters = atob(base64String.split(',')[1]); // 去除前面的数据类型部分
                const byteNumbers = new Array(byteCharacters.length);
                for (let i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                const byteArray = new Uint8Array(byteNumbers);
                const blob = new Blob([byteArray], { type: 'image/png' }); // 根据实际类型修改
                let imageUrl = URL.createObjectURL(blob); // 创建可用的 URL
                return imageUrl
            } else {
                alert('请提供有效的 Base64 字符串');
            }
        }
    },
    // 
    mounted(){
        // 判断是否支付
        if(!this.paymentStatus){
            this.interruptText = '您未支付，请重新选择支付'
            this.isPaymentStatusShow = true;
            return false
        }
        let type = this.$route.query.type;
        this.taskId = this.$route.query.taskId;
        if(type){
            this.type = type
        }else{
            // 初始化状态
            this.setCommonData({
                key:'isPrinter',
                value:false,
            })
            this.setCommonData({
                key:'isDownload',
                value:false,
            })
            this.setCommonData({
                key:'lastOperation',
                value:'',
            })
        }
        // if(!this.orderNumber){
        //     let orderNumber = localStorage.getItem('orderNumber');
        //     this.setCommonData({
        //         key:'orderNumber',
        //         value:orderNumber,
        //     })
        // }
        
        // 手机扫码上传
        this.isH5Upload = this.$route.query.h5Upload;
        if(this.isH5Upload){
            this.type = 4;
            this.faceUrl = this.$store.state.photograph;
            console.log(this.faceUrl)
            // 生成图片
            console.log('调用后台生成图片')
            this.changeLoadingText();
            this.initWebSocket()
        }


        this.getDeviceQrcodes()
    },
    beforeDestroy: function () {
        // 页面离开时断开连接,清除定时器
        this.disconnect();
        clearInterval(this.timer);
        this.stopCamera();
    }
}
</script>

<style lang="less" scoped>
.photograph{
  width: 100%;
  height: 1920px;
  background-image: url('../assets/img/bgImg.png');
  background-size: 100% 1920px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .headss{
    flex: none;
  }
  .exitBtn{
    width: 94px;
    height: 94px;
    position: fixed;
    left: 52px;
    top: 46px;
  }
  .conlist{
    flex: 1;
    padding: 0  50px  120px 50px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    transform:translateX(0px) scale(1);
    .zhuyiBox{
        width: 100%;
        .zhuyiImg{
            width: 750px;
            height: 938px;
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .takingPhotos{
        width: 100%;
        .photosBox{
            width: 750px;
            height: 1043px;
            border: 4px solid transparent;
            border-image: linear-gradient(180deg, #7875FC99, #FFCA9999) 1 1 round;
            box-shadow: 0px 0px 10px 0px #03008733;
            box-sizing: border-box;
            margin: 0 auto;
            position: relative;
            video{
                width: 100%;
                height: 100%;
            }
            .renxiang{
                width: 742px;
                height: 1035px;
                position: absolute;
                left: 0px;
                top: 0px;
                right: 0;
                // margin: 0 auto;
                // bottom: 64px;
                // top: 179px;
                z-index: 99;
            }
            .djs{
                font-size: 500px;
                color: #fff;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                transform: translateY(-50%);
                animation: run 5s ease-in;
                z-index: 99;
            }
        }
        .photosTip{
            font-size: 40px;
            color: #7875FC;
            margin-top: 48px;
            text-align: center;
        }
    }
    .photosFinish,.generatingSuccess{
        width: 100%;
        .photosBox{
            width: 742px;
            height: 928px;
            border: 4px solid transparent;
            border-image: linear-gradient(180deg, #7875FC99, #FFCA9999) 1 1 round;
            box-shadow: 0px 0px 10px 0px #03008733;
            box-sizing: border-box;
            margin: 0 auto;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .photosBtns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 134px;
            .leftBtn{
                margin-right: 86px;
                // color: #7875FC;
                // border: 4px solid #7875FC;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                .icons{
                    font-size: 40px;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
            .rightBtn{
                // background-color: #7875FC;
                // color: #FFFFFF;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                margin-left: 88px;
                .icons{
                    font-size: 40px;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
            .bths{
                width: 308px;
                height: 94px;
                font-size: 32px;
                text-align: center;
                line-height: 94px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 64px;
                cursor: pointer;
                color: #fff;
                background-color: #7875FC;
                border-radius: 64px;
                box-shadow: 0px 0px 10px 0px #03008A33;
                
            }
            // .leftBtn{
            //     background-image: url('../assets/img/leftBtn.png');
            //     background-size: 100% 101px;
            //     margin-right: 86px;
            // }
            // .rightBtn{
            //     background-image: url('../assets/img/rightBtn.png');
            //     background-size: 100% 101px;
            // }
            // .bths{
            //     width: 240px;
            //     height: 101px;
            //     font-size: 32px;
            //     color: #FFFFFF;
            //     text-align: center;
            //     line-height: 101px;
            //     display: flex;
            //     align-items: center;
            //     justify-content: center;
            //     .icons{
            //         font-size: 40px;
            //         font-weight: bold;
            //         margin-right: 10px;
            //     }
            // }
            .btnOne{
                width: 230px;
                height: 106px;
                // background-image: url('../assets/img/buttonOne.png');
                // background-size: 100% 106px;
            }
        }
    }
    .generatingProgress{
        width: 100%;
        .loading{
            display: flex;
            justify-content: center;
            margin-top: 150px;
            .el-icon-loading{
                font-size: 120px;
                color: #7875FC;
            }
        }
        .tips{
            font-size: 32px;
            color: #7875FC;
            margin-top: 31px;
            text-align: center;
        }
    }
    .generatingSuccess{
        width: 100%;
        .tuoFun{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 64px;
            .qrCodeBox{
                .codeBox{
                    width: 310px;
                    height: 310px;
                    background-image: url('../assets/img/Rectangle 30399.png');
                    background-size: 100% 310px;
                    background-repeat: no-repeat;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 4px;
                    box-sizing: border-box;
                    overflow: hidden;
                    .code{
                        width:100%;
                        height: 100%;
                        background-color: #fff;
                        border-radius: 14px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .titles{
                    font-size: 32px;
                    color: #7875FC;
                    text-align: center;
                    font-weight: bold;
                    margin-top: 16px;
                }
                .tips{
                    font-size: 20px;
                    color: #7875FC;
                    line-height: 30px;
                    text-align: center;
                    font-weight: bold;
                    margin-top: 12px;
                }
            }
            .printBox{
                margin-left: 128px;
                
                .type1{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .print{
                        width: 240px;
                        height: 240px;
                    }
                    .printBtns{
                        width: 266px;
                        height: 94px;
                        background-color: #7875FC;
                        border-radius: 64px;
                        text-align: center;
                        line-height: 94px;
                        color: #fff;
                        font-size: 40px;
                        box-shadow: 0px 0px 10px 0px #03008A33;
                        margin-top: 52px;
                        cursor: pointer;
                    }
                }
                .type2{
                    .loading{
                        display: flex;
                        justify-content: center;
                        margin-top: 94px;
                        .el-icon-loading{
                            font-size: 120px;
                            color: #7875FC;
                        }
                    }
                    .titles{
                        display: flex;
                        align-items: center;
                        font-weight: bold;
                        margin-top: 115px;
                        img{
                            width: 48px;
                            height: 48px;
                        }
                        span{
                            font-size: 32px;
                            color: #7875FC;
                            margin-left: 10px;
                        }
                    }
                    .tips{
                        font-size: 20px;
                        color: #7875FC;
                        text-align: center;
                        font-weight: bold;
                        margin-top: 8px;
                    }
                }
                .type3{
                    .titles{
                        display: flex;
                        align-items: center;
                        font-weight: bold;
                        margin-top: 331px;
                        img{
                            width: 48px;
                            height: 48px;
                        }
                        span{
                            font-size: 32px;
                            color: #7875FC;
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
        .successButtom{
            width: 100%;
            display: flex;
            flex: 1;
            margin-top: 115px;
            justify-content: center;
            .leftBox{
                width: 318px;
                height: 438px;
                background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
                box-shadow: 8px 10px 10px 0px #03009233;
                box-sizing: border-box;
                border-radius: 4px;
                padding: 6px;
                position: relative;
                margin-right: 138px;
                .divs{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    border-radius: 4px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit:cover;
                        vertical-align: bottom;
                        border-radius: 4px;
                    }
                }
                .beforeBox{
                    width: 200px;
                    position: absolute;
                    right:-46%;
                    top: 0;
                    .span{
                        font-size: 32px;
                        transform: rotate(-20deg);
                        margin-left: 30%;
                        margin-top: -25%;
                    }
                    img{
                        width: 120px;
                        height: 132px;
                    }
                }
            }
            .rightBox{
                padding-top: 135px;
                .btnBox{
                    margin-top: 0;
                    img{
                        width: 48px;
                        height: 46px;
                        position: absolute;
                        left: 50%;
                        top: 60px;
                    }
                }
                .nextTip{
                    font-size: 32px;
                    margin-top: 39px;
                }
            }
        }
        .photosBoxThree{
            width: 814px;
            height: 988px;
            margin: 0 auto;
            background-image: url('../assets/img/successBg.png');
            background-size: 100% 988px;
            overflow: hidden;
            .divs{
                width: 550px;
                height: 760px;
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                margin-left: 117px;
                margin-top: 68px;
                background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
                box-sizing: border-box;
                border-radius: 4px;
                padding: 6px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit:cover;
                    vertical-align: bottom;
                    border-radius: 4px;
                }
            }
            .textTip{
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 14px;
                span{
                    font-size: 28px;
                }
                img{
                    width: 30px;
                    height: 31px;
                    margin-left: 3px;
                }
            }
        }
        .gzhDownload{
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 40px;
            .tips{
                font-size: 32px;
                position: relative;
                padding-top: 86px;
                margin-right: 35px;
                img{
                    width: 140px;
                    height: 166px;
                    transform: rotate(-20deg);
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
    .photosBoxTwo{
        width: 550px;
        height: 744px;
        background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
        box-shadow: 8px 10px 10px 0px #03009233;
        box-sizing: border-box;
        border-radius: 4px;
        margin: 0 auto;
        padding: 6px;
        position: relative;
        margin-top: 30px;

        &::after{
            content:'';
            display: block;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #B0AEFF 0%, #FFC9EB 43.13%, #FFDEC0 100%);
            position: absolute;
            border-radius: 4px;
            left: 0;
            top: 0;
            padding: 6px;
            z-index: -2;
            box-sizing: border-box;
            transform: rotate(-6deg);
            box-shadow: 8px 10px 10px 0px #03009233;
        }
        &::before{
            content:'';
            display: block;
            width: calc(100% - 12px);
            height: calc(100% - 12px);
            position: absolute;
            background-color: #FFFFFF;
            z-index: -1;
            left: 6px;
            top: 6px;
            transform: rotate(-6deg);
            border-radius: 4px;
        }
        .divs{
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit:cover;
                vertical-align: bottom;
                border-radius: 4px;
            }
        }
        .afterBox{
            width: auto;
            position: absolute;
            left: -36%;
            top: 50%;
            transform: translateY(-50%);
            .span{
                font-size: 64px;
                transform: rotate(-20deg);
            }
            img{
                width: 140px;
                height: 166px;
                margin-top: -20px;
                margin-left: 100px;
            }
        }
    }
    .btnBox{
        width: 250px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        margin: 0 auto;
        margin-top: 34px;
        cursor: pointer;
        font-size: 32px;
        position: relative;
        &::before{
            content:'';
            display: block;
            background-image: url('../assets/img/commonBtn.png');
            background-size: 100% 80px;
            position: absolute;
            width: 240px;
            height: 80px;
            z-index: -1;
        }
        // &::after{
        //     content: '';
        //     position: absolute;
        //     top: -15px;//设置top,left,right,bottom大小来控制扩大的范围
        //     left: -30px;
        //     right: -30px;
        //     bottom: -15px;
        // }
    }
  }
//   .btnBox{
//     width: 250px;
//     height: 80px;
//     background-image: url('../assets/img/commonBtn.png');
//     background-size: 100% 80px;
//     // box-shadow: 0px 0px 10px 0px #03008A33;
//     font-size: 40px;
//     color: #FFFFFF;
//     text-align: center;
//     line-height: 94px;
//     margin: 0 auto;
//     margin-top: 89px;
//     cursor: pointer;
//   }
    .lineBox{
        width: 840px;
        height: 32px;
        background-color: #fff;
        border-radius: 16px;
        position: relative;
        padding: 8px;
        box-sizing: border-box;
        background: linear-gradient(93.09deg, #B0AEFF 28.11%, #FFC9EB 57.72%, #FFDEC0 92.48%);
        .progress{
            width: 100%;
            height: 100%;
            border-radius: 16px;
            background-color: #fff;
            overflow: hidden;
            .progressCon{
                // width: 100%;
                width: 0;
                height: 100%;
                background: linear-gradient(to right, #FFC9EB 28.11%, #FFC9EB 57.72%, #FFDEC0 92.48%);
                animation: myprogress ease 5s infinite;
                border-radius: 16px;
            }
        }
        .imgs{
            width: 50px;
            height: 63px;
            position: absolute;
            bottom: 32px;
            left: 0;
            transform: rotate(15deg);
            animation: qingting ease 5s infinite;
        }
        .numbers{
            font-size: 40px;
            color: #7875FC;
            font-weight: bold;
            position: absolute;
            top: 50px;
            right: 0;
        }
    }
//   .lineBox{
//     width: 840px;
//     height: 22px;
//     background-color: #fff;
//     border-radius: 16px;
//     position: relative;
//     .progress{
//         width: 50%;
//         height: 100%;
//         border-radius: 16px;
//         background-color: #7875FC;
//         transition: 0.5s;
//     }
//     .imgs{
//         width: 50px;
//         height: 63px;
//         position: absolute;
//         bottom: 32px;
//         left: 50%;
//         transform: translateX(-30%);
//         transition: 0.5s;
//     }
//     .numbers{
//         font-size: 40px;
//         color: #7875FC;
//         font-weight: bold;
//         position: absolute;
//         top: 50px;
//         right: 0;
//     }
//   }
    @keyframes run {
        0% {
            display: block;
        }
        20% {
          /*由于动画时长是10s，此时是1s时刻,字体大小变为100px，z方向距离主屏幕为300px*/
          font-size: 100px;
          transform: translate3d(0, -50%, -500px);
        }
        21% {
            /*随后字体大小变为300px，z方向距离主屏幕为0，后面每到整秒数都会重复进行*/
            font-size: 500px;
            transform: translate3d(0, -50%, 0);
        }
        40% {
          /*由于动画时长是10s，此时是1s时刻,字体大小变为100px，z方向距离主屏幕为300px*/
          font-size: 100px;
          transform: translate3d(0, -50%, -500px);
        }
        41% {
            /*随后字体大小变为300px，z方向距离主屏幕为0，后面每到整秒数都会重复进行*/
            font-size: 500px;
            transform: translate3d(0, -50%, 0);
        }
        60% {
          /*由于动画时长是10s，此时是1s时刻,字体大小变为100px，z方向距离主屏幕为300px*/
          font-size: 100px;
          transform: translate3d(0, -50%, -500px);
        }
        61% {
            /*随后字体大小变为300px，z方向距离主屏幕为0，后面每到整秒数都会重复进行*/
            font-size: 500px;
            transform: translate3d(0, -50%, 0);
        }
        80% {
          /*由于动画时长是10s，此时是1s时刻,字体大小变为100px，z方向距离主屏幕为300px*/
          font-size: 100px;
          transform: translate3d(0, -50%, -500px);
        }
        81% {
            /*随后字体大小变为300px，z方向距离主屏幕为0，后面每到整秒数都会重复进行*/
            font-size: 500px;
            transform: translate3d(0, -50%, 0);
        }
        100% {
            font-size: 0px;
            transform: translate3d(0, -50%, -500px);
            display: none;
        }
    }
    @keyframes floating {
        0% {
            transform: translateY(-30%); /* 初始位置 */
        }
        50% {
            transform: translateY(-50%); /* 向上移动4像素 */
        }
        100% {
            transform: translateY(-30%); /* 回到初始位置 */
        }
    }
    @keyframes myprogress {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }
    @keyframes qingting {
        from {
            left: -20px;
        }
        to {
            left: calc(100% - 20px);
        }
    }

}
</style>
<style media="print">
@page {
  size: auto;
  margin: 3px;
}
 
html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>